import { ProCard, ProColumns, ProForm, ProFormDatePicker, ProFormSelect, ProFormText, ProFormTextArea, ProTable } from "@ant-design/pro-components";
import { Col, Row } from "antd";
import moment from "moment";

const App:React.FC=()=>{
    interface DataType{
        sno?:number,code?:string,name?:string,invstd?:string,status?:string,munit_name?:string,quantity?:number,
        degree?:string,memo?:string,type?:string,reason?:string,
     };

     const columns:ProColumns<DataType>[]=[
        {dataIndex:'sno',title:'序'},{dataIndex:'type',title:'设备类型'},
        {dataIndex:'code',title:'设备编码'},{dataIndex:'name',title:'设备名称'},
        {dataIndex:'invstd',title:'规格型号'},{dataIndex:'munit_name',title:'单位'},
        {dataIndex:'quantity',title:'数量'},{dataIndex:'degree',title:'优先级'},
        {dataIndex:'reason',title:'报废原因'},
        {dataIndex:'memo',title:'备注'},
        {dataIndex:'status',title:'状态'},
     ];

     const tdata:DataType[]=[
        {sno:1,code:'A0001',name:'XX加工中心',invstd:'200*56-60',status:'正常',munit_name:'台',
         quantity:1,degree:'A',memo:'',type:'生产设备',reason:'使用年限到期' },
         {sno:2,code:'B06601',name:'XX刀具',invstd:'60-98',status:'正常',munit_name:'把',
            quantity:9,degree:'B',memo:'部分人为损坏',type:'工装夹具',reason:'使用寿命到期'},
            {sno:3,code:'KVC002',name:'XX叉车',invstd:'DC90-556',status:'正常',munit_name:'台',
                quantity:1,degree:'B',memo:'在X月XX日撞运输平台',type:'运输设备',reason:'事故损坏'},
                {sno:4,code:'M06601',name:'油漆',invstd:'立邦10KG',status:'正常',munit_name:'桶',
                    quantity:5,degree:'C',memo:'',type:'辅助材料',reason:'超保质期'},
                    {sno:5,code:'C09001',name:'通风管道',invstd:'900-80',status:'正常',munit_name:'套',
                        quantity:1,degree:'C',memo:'2025第JG003号',type:'环保设备',reason:'技术改造'},
         
        
     ];

    return <>
         <ProCard title='报废申请' style={{height:700}}
         >
            <ProForm submitter={false} layout='horizontal' labelAlign="left" labelCol={{span:5,offset:0}}>
               <Row gutter={8}>
                  <Col span={6}>
                     <ProFormText name='f1' label='报废单号' width={200}/>
                     <ProFormDatePicker name='f2' label='报废类型' width={200} initialValue={moment()}/>
                  </Col>
                  <Col span={6}>
                     <ProFormSelect name='f3' label='报废部门' width={200}/>
                     <ProFormText name='f4' label='报废审批' width={200}/>
                  </Col>
                  <Col span={6}>
                     <ProFormDatePicker name='f5' label='附件' width={200}/>
                     <ProFormDatePicker name='f6' label='备注' width={200}/>
                  </Col>
                  <Col span={6}>
                     <ProFormText name='f7' label='制单日期' width={200}  />
                     <ProFormText name='f8' label='制单人' width={200}  />
                  </Col>
                </Row> 
            </ProForm>
             <ProTable<DataType>
                search={false}
                options={false}
                columns={columns}
                dataSource={tdata}

                />
         </ProCard>
    </>;
};

export default App;